{% extends 'base.html' %}
{% load static %}
{% block title%}课程章节信息{% endblock %}

{% block custom_css %}
    <link rel="stylesheet" type="text/css" href="{%static 'css/muke/base.css'%}" />
    <link rel="stylesheet" type="text/css" href="{%static 'css/muke/common-less.css'%}" />
    <link rel="stylesheet" type="text/css" href="{%static 'css/muke/course/learn-less.css'%}" />
    <link rel="stylesheet" type="text/css" href="{%static 'css/aui.css'%}" />
    <link rel="stylesheet" type="text/css" href="{%static 'css/mooc.css'%}" />
    <link rel="stylesheet" type="text/css" href="{%static 'css/muke/course/common-less.css'%}">
{#    <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>#}
{#    <script src="{% static 'js/jquery-migrate-1.2.1.min.js' %}" type="text/javascript"></script>#}
    <link rel="stylesheet" type="text/css" href="{% static 'css/video-js.min.css' %}">

    <style>
        .video-js .vjs-big-play-button{
            top: 50%;
            left: 50%;
        }
    </style>

{% endblock %}

{% block custom_js %}
    <script src="{% static 'js/video.min.js' %}" type="text/javascript"></script>
{% endblock %}
{% block custom_bread %}
<section>
	<div class="wp">
		<div class="crumbs">
			<ul>
				<li><a href="{% url 'index' %}">首页</a>&gt;</li>
                <li><a href="{% url 'course:list' %}">公开课程</a>&gt;</li>
				<li><a href="{% url 'course:detail' course.id%}">{{ course.name }}</a>&gt;</li>
                <li>章节信息</li>
			</ul>
		</div>
	</div>
</section>
{% endblock %}

{% block content %}
    <div id="main">
    <div style="width:1200px;height:675px; margin-left: 340px">
        <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="1200"
              poster="http://video-js.zencoder.com/oceans-clip.png"
              data-setup="{}">
            <source src="http://123.57.245.10/media/vedio-resource/7988cdc04c8afa37a0696a3c285c40d7.mp4" type='video/mp4'>
        </video>
    </div>

    <div class="course-info-main clearfix w has-progress">

        <div class="info-bar clearfix">
        <div class="content-wrap clearfix">
            <div class="content">
                <div class="mod-tab-menu">
                    <ul class="course-menu clearfix">
                        <li><a class="ui-tabs-active active" id="learnOn"  href="{% url 'course:lesson' course.id%}"><span>章节</span></a></li>
                        <li><a id="commentOn" class="" href="{% url 'course:comments' course.id%}"><span>评论</span></a></li>
                    </ul>
                </div>
            {% if course.notice%}
                <div id="notice" class="clearfix">
                    <div class="l"> <strong>课程公告:</strong> <a  href="javascript:void(0)">{{ course.notice }}</a> </div>
                </div>
            {% endif %}
                <div class="mod-chapters">
                    {% for lesson in course.lesson_set.all %}
                        <div class="chapter chapter-active" >
                            <h3>
                                <strong><i class="state-expand"></i>{{ lesson.name }}</strong>
                            </h3>
                            <ul class="video">
                               {% for video in lesson.vedio_set.all %}
                                    <li>
                                        <a target="_blank" href='{% url 'course:video' course.id video.id%}' class="J-media-item studyvideo">{{ video.name}}({{ video.learn_times }})
                                            <i class="study-state"></i>
                                        </a>
                                    </li>
                               {% endfor %}

                            </ul>
                        </div>
                    {% endfor %}
                </div>

            </div>
            <div class="aside r">
                <div class="bd">

                    <div class="box mb40">
                        <h4>资料下载</h4>
                        <ul class="downlist">
                            {% for resource in course_resource %}
                            <li>
                                <span ><i class="aui-iconfont aui-icon-file"></i>&nbsp;&nbsp;{{ resource.name }}</span>
                                <a href="{{ resource.file.url }}" class="downcode" target="_blank" download="" data-id="274" title="">下载</a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="box mb40">
                        <h4>讲师提示</h4>
                        <div class="teacher-info">
{#                            <a href="{% url 'course' course.id%}" target="_blank">#}
{#                                <img src='{{ course.teacher.image.url }}' />#}
{#                            </a>#}
        <span class="tit">
{#          <a href="{% url 'course' course.id%}" target="_blank">{{ course.teacher.name }}</a>#}
        </span>
                            <span class="job">{{ course.teacher.work_position }}</span>
                        </div>
                        <div class="course-info-tip">
                            <dl class="first">
                                <dt>课程须知</dt>
                                <dd class="autowrap">{{ course.youneed_know }}</dd>
                            </dl>
                            <dl>
                                <dt>老师告诉你能学到什么？</dt>
                                <dd class="autowrap">{{ course.teacher_tell }}</dd>
                            </dl>
                        </div>
                    </div>


                    <div class="cp-other-learned  js-comp-tabs">
                        <div class="cp-header clearfix">
                            <h2 class="cp-tit l">该课的同学还学过</h2>
                        </div>
                        <div class="cp-body">
                            <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course" style="display: block">
                                <!-- img 200 x 112 -->
                                <ul class="other-list">
                                    {% for course in related_courses %}
                                        <li class="curr">
                                        <a href="{% url 'course:detail' course.id %}" target="_blank">
                                            <img src="{{ course.image.url }}" alt="{{ course.name }}">
                                            <span class="name autowrap">{{ course.name }}</span>
                                        </a>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>    </div>
        </div>
        <div class="clear"></div>

    </div>

</div>
</div>
{% endblock %}








